<template>
  <div>
    <van-field
      v-model="nickname"
      label="姓名"
      placeholder="请输入姓名"
      :rules="[{ required: true, message: '姓名不能为空' }]"
    />
    <van-field
      v-model="tel"
      label="手机号"
      placeholder="请输入手机号"
      :rules="[{ required: true, message: '手机号不能为空' }]"
    />
    <van-field
      v-model="provice_city_area"
      is-link
      readonly
      name="area"
      label="地区选择"
      placeholder="点击选择省市区"
      @click="showArea = true"
    />
    <van-popup v-model:show="showArea" position="bottom">
      <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
    </van-popup>
    <MAP @longitude-li="longitudeLi" @latitude-li="latitudeLi" @addressLi='addressLi'  :message="provice_city_area" @childEvent="handleChildEvent" ></MAP>
    <van-field
      v-model="detail_address"
      label="详细地址"
      placeholder="请输入详细地址"
      :rules="[{ required: true, message: '详细地址不能为空' }]"
    />
    <!-- <van-field
      v-model="longitude"
      label="经度"
      placeholder="请输入经度"
      :rules="[{ required: true, message: '经度不能为空' }]"
    />
    <van-field
      v-model="latitude"
      label="纬度"
      placeholder="请输入纬度"
      :rules="[{ required: true, message: '纬度不能为空' }]"
    /> -->
    <van-button type="primary" @click="onSave">保存地址</van-button>
  </div>
</template>·

<script setup>
import { ref } from 'vue'

import { areaList } from '@vant/area-data'
import { getaddress } from '../../request/http'
// import 'https://webapi.amap.com/maps?v=1.4.15&key=adbd111750bbb32d66f2310b0bb9767a'
import MAP from '../../components/MapContainer/index.vue';
import {useRouter} from 'vue-router'
const router = useRouter() 
const tel = ref('')
const nickname = ref('')
const provice_city_area = ref('')
const longitude = ref('')
const latitude = ref('')
const detail_address = ref('')

const showArea = ref(false)
const onConfirm = ({ selectedOptions }) => {
  showArea.value = false
  provice_city_area.value = selectedOptions.map((item) => item.text).join('/')
}

const longitudeLi = (e) => {
    longitude.value = e;
  
}

const latitudeLi = (e) => {
    latitude.value = e;
   
}
const addressLi = (e) =>{
    detail_address.value = e;
}

const handleChildEvent = (childMessage) =>{
 console.log('子组件传来的消息:', childMessage);
}

const onSave = () => {
    const data = {
        nickname: nickname.value,
        tel: tel.value,
        provice_city_area: provice_city_area.value,
        detail_address: detail_address.value,
        longitude: longitude.value,
        latitude: latitude.value
    }
    console.log(data);
  getaddress(data)
    .then((res) => {
      console.log(res);
      router.push('/address')
    })
    .catch((error) => {
      console.error('保存地址失败', error);
    });
//   getCoordinates(detailress.value);
}
</script>

<style>
</style>
